<template>
  <h1>我发起的流程</h1>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="sendName"
        label="发起人"
        width="180">
    </el-table-column>
    <el-table-column
        prop="applyName"
        label="审批人"
        width="180">
    </el-table-column>
    <el-table-column
        prop="status"
        label="流程状态"
        width="180">
    </el-table-column>
    <el-table-column
        prop="text"
        label="详情"
        width="180">
    </el-table-column>
    <el-table-column
        prop="taskId"
        label="任务ID"
        width="200">
    </el-table-column>
    <el-table-column
        prop="processId"
        label="流程ID"
        width="200">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
            type="success"
            @click="getImage(scope.$index, scope.row)"
        >查看流程图</el-button>
        <el-button
          type="danger"
          @click="deleteFlow(scope.$index, scope.row)"
          >删除流程</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {getUserSendFlow} from "../../utils/api";
import axios from 'axios'
import {mapState} from "vuex";

export default {
  name: "sponsor",
  computed: mapState([
    "auth"
  ]),

  data() {
    return {
      tableData:[]
    }
  },
  created() {
    let userName = this.auth.username;
    console.log(userName);
    this.getUserSendFlow(userName);
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.status === '审批中') {
        return 'warning-row';
      } else if (row.status === '通过') {
        return 'success-row';
      }
      return '';
    },
    //获取流程列表
    getUserSendFlow(userName) {
      const that = this;
     axios.post('http://localhost:8410/flowable/findBySendUser?userName='+userName).then(function (response){
       console.log(response.data)
       that.tableData = response.data;
     })
    },
   // 跳转流程图
   getImage(index,row){
      let processId = row.processId;
      console.log(processId);
      window.open('http://localhost:8888/leave/createProcessDiagramPic?processId='+processId)
   },
    //删除
    deleteFlow(index,row){
      let processId = row.processId;
      let taskId = row.taskId;
      console.log("删除信息：processId:"+processId+" taskId:"+taskId)
      axios.delete('http://localhost:8410/flowable/delete',{
        data: {
          processId: processId,
          taskId: taskId
        }
      }).then(res=>{
        if(res.data===0){
          alert("删除成功")
          location.reload()
        }
      })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
